<template>
    <div style="display: inline-block">
        <el-tooltip class="item" effect="dark" content="开卡" placement="top-start">
            <el-button icon="el-icon-plus" circle @click="onAdd()" size="small"></el-button>
        </el-tooltip>
        <el-dialog :visible.sync="editDialog" width="80%">
            <template #title>
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">会员卡开卡</span>
                </div>
            </template>
            <el-form ref="editForm" :model="postForm" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="会员卡号" prop="card_sn">
                            <el-input v-model="postForm.card_sn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡号密码">
                            <el-input type="password" v-model="postForm.password" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="持卡人" prop="name">
                            <el-input v-model="postForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期">
                            <el-date-picker v-model="postForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生日期" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="postForm.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别">
                            <el-radio-group v-model="postForm.sex">
                                <el-radio-button label="0">未知</el-radio-button>
                                <el-radio-button label="1">男</el-radio-button>
                                <el-radio-button label="2">女</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="会员ID">
                            <el-input v-model="postForm.uid"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input v-model="postForm.remark" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="onSave">确 定</el-button>
            </template>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "card.form",
        props:{

        },
        data() {
            return {
                editDialog: false,
                postForm:{
                    card_sn:'',
                    name:'',
                    mobile:'',
                    uid:'',
                    birthday:'',
                    sex:0,
                    password:'',
                    //deposit_type:0,
                    //money:0,
                    remark:''
                },
                rules: {
                    card_sn: [
                        { required: true, message: '请输入会员卡号', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入持卡人', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ]
                }
            };
        },
        computed:{
          hasId(){
              console.log(this.postForm.id)
              return !!this.postForm.id
          }
        },
        methods: {
            onAdd(){
                this.postForm = {
                        card_sn:'',
                        name:'',
                        mobile:'',
                        uid:'',
                        birthday:'',
                        sex:0,
                        password:'',
                        deposit_type:0,
                        money:0,
                        remark:''
                };

                this.editDialog = true
            },
            onSave() {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        let method = "post",
                            url = '/api/member-cards';
                        if (this.postForm.id > 0) {
                            url = url + "/" + this.postForm.id;
                            method = "put";
                        }
                        this.$http({
                            url: url,
                            method: method,
                            data: this.postForm,
                        }).then(ret=>{
                            if (ret.status === 200 || ret.status === 201) {
                                this.$message({ type: "success", message: '操作成功'});
                                this.editDialog = false;
                                //this.getList();
                                this.$emit('refresh')
                            } else {
                                this.$message({ type: "error",message: ret.message});
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>